<template>
  <a-menu-item :class="{ 'bg-immich-bg': isSelected }">
    <router-link :to="routeId" @click="handleClick">
      <a-icon :type="iconType" />
      {{ title }}
    </router-link>
  </a-menu-item>
</template>

<script>
export default {
  name: 'SideBarLink',
  props: {
    title: {
      type: String,
      required: true,
    },
    routeId: {
      type: String,
      required: true,
    },
    icon: {
      type: String,
      required: true,
    },
    isSelected: {
      type: Boolean,
      default: false,
    },
    dropdownOpen: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    iconType() {
      return this.icon;
    },
  },
  methods: {
    handleClick() {
      this.$emit('update:isSelected', !this.isSelected);
    },
  },
};
</script>

<style scoped>
.ant-menu-item {
  @apply flex items-center gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary;
}

.ant-menu-item-selected {
  @apply bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary;
}

.ant-menu-item-selected .anticon {
  @apply text-immich-primary dark:text-immich-dark-primary;
}

.ant-menu-item .anticon {
  @apply text-immich-fg dark:text-immich-dark-fg;
}

.ant-menu-item .anticon.flipped {
  transform: scaleX(-1);
}

.ant-menu-item span {
  @apply text-sm font-medium;
}
</style>